<template>
<div class="chargebackApply">
  <search-block type="flex">
    <template slot="button">
      <el-button type="primary" @click="search(true)">查询</el-button>
    </template>
    <el-form inline :model="model">
      <el-form-item label="订单号:">
        <el-input v-model="model.orderSn" clearable></el-input>
      </el-form-item>
      <el-form-item label="申请时间:">
        <el-date-picker
          v-model="model.commitTime"
          clearable
          type="date"
          value-format="yyyy-MM-dd"
          :picker-options="{
            shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }]
        }"></el-date-picker>
      </el-form-item>
      <el-form-item label="退单状态:">
        <el-select v-model="model.status" clearable>
          <el-option
            v-for="item in returnOrderStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
<!--      <el-form-item label="处理时间:">
        <el-date-picker
          v-model="model.handleTime"
          clearable
          type="date"
          value-format="yyyy-MM-dd"
          :picker-options="{
            shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }]
        }"></el-date-picker>
      </el-form-item>-->
      <el-form-item label="售后状态:">
        <el-select v-model="model.finishStatus" clearable>
          <el-option label="进行中" :value="0"></el-option>
          <el-option label="已完成" :value="1"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </search-block>
  <y-table
    ref="table"
    border
    pagination
    :getDataWay="getDataWay"
    :columns="columns">
    <el-table-column slot="status" label="退单状态" align="center" header-align="center" min-width="110">
      <template v-slot="{row}">
        <span :class="statusClass(row)">{{$$getCommonArrayName(row.status, returnOrderStatusOptions)}}</span>
      </template>
    </el-table-column>
    <el-table-column slot="y-oper" label="操作" align="center" header-align="center" width="150">
      <template v-slot="{row}">
        <div class="table-buttons">
          <el-button size="mini" @click="showDetails(row)">查看详情</el-button>
        </div>
      </template>
    </el-table-column>
  </y-table>
  <el-drawer
    :visible.sync="viewForms.showForm"
    title="退单详情"
    :size="1000"
    destroy-on-close>
    <chargeback-info
      v-if="viewForms.currentForm && viewForms.currentForm.id"
      :chargeback-id="viewForms.currentForm.id"
      @close-drawer="viewForms.showForm = false"
      @refresh="search(false)"></chargeback-info>
  </el-drawer>
</div>
</template>

<script>
import ChargebackInfo from "@/views/goods/chargebackDetails/chargebackInfo";
export default {
  name: "chargebackApply",
  components: {ChargebackInfo},
  inject: ['getEnum'],
  computed:{
    getDataWay(){
      return{
        dataType: 'url',
        data: this.$api.goods.chargeBackApplyList,
        param: this.model
      }
    }
  },
  data(){
    return {
      returnOrderStatusOptions: this.getEnum('returnOrderStatus'),
      returnApplyTypeOptions: this.getEnum('returnApplyType'),
      model: {
        orderSn: '',
        commitTime: '',
        status: '',
        finishStatus: '',
        handleTime: ''
      },
      columns: [{
        label: '订单号',
        prop: 'orderSn',
        minWidth: 150,
      },{
        label: '申请时间',
        prop: 'commitTime',
        minWidth: 160,
        formatter(row){
          return (row.commitTime || '').replace('T', ' ');
        }
      },{
        label: '申请人',
        prop: 'memberName',
        minWidth: 150
      }/*,{
        label: '退款金额',
        prop: 'productRealPrice',
        formatter(row){ return '￥' + row.productRealPrice }
      }*/,{
        label: '退款方式',
        prop: 'applyType',
        formatter: (function(row){
          return this.$$getCommonArrayName(row.applyType, this.returnApplyTypeOptions)
        }).bind(this),
        minWidth: 100
      },{
        prop: 'status',
        template: true
      }],
      viewForms:{
        currentForm: {},
        showForm: false,
      },
    }
  },
  methods:{
    search(jumpToFirst){
      this.$refs['table'].loadData(this.model, jumpToFirst);
    },
    showDetails(row){
      this.$set(this.viewForms, 'currentForm', row);
      this.viewForms.showForm = true;
    },
    statusClass({status}){
      switch(status){
        case 0:case 10:case 15: return 'y-warning';
        case 5:case 20: return 'y-primary';
        case 25: return 'y-success';
        case 30:case 35: return 'y-info';
      }
      return '';
    }
  }
}
</script>

<style scoped>

</style>
